import React, {
    Component,
} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {
    StyleSheet,
    View,
    Text,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    TextInput
} from 'react-native';

const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
import { ToastToUser } from './CustomToast';
// 一些常量设置
const isIos = Platform.OS == 'ios';

export default class AlertBox extends Component {

    render() {
        if (this.state.show) {
            return (
                <View style={styles.container}>
                    <View style={styles.frameBox}>
                        <Text style={styles.titleText}>{this.state.title}</Text>
                        <Text style={styles.descText}>{this.state.desc}</Text>
                        <View style={styles.bottomBox}>
                            {
                                this.state.cancelTitle ?
                                    <TouchableOpacity
                                        style={[styles.bottomItemBox, { borderRightColor: '#E4E4E4', borderRightWidth: this.state.sureTitle ? 0.5:0, width: this.state.sureTitle ? '50%' : '100%' }]}
                                        onPress={() => {
                                            this.onClickCancelBtn()
                                        }}
                                    >
                                        <Text style={styles.cancelText}>{this.state.cancelTitle}</Text>
                                    </TouchableOpacity>
                                    :
                                    null
                            }

                            {
                                this.state.sureTitle ?
                                    <TouchableOpacity
                                        style={[styles.bottomItemBox, { width: this.state.cancelTitle ? '50%' : '100%' }]}
                                        onPress={() => {
                                            this.onClickSureBtn()
                                        }}
                                    >
                                        <Text style={styles.sureText}>{this.state.sureTitle}</Text>
                                    </TouchableOpacity>
                                    :
                                    null
                            }
                        </View>
                    </View>
                </View>
            );
        } else {
            return (
                null
            )
        }

    }

    constructor(props) {
        super(props);
        this.state = {
            show: false,
            title: '',
            desc: '',
            cancelTitle: '',
            sureTitle: ''
        }
        if (props.onRef) {
            props.onRef(this)
        }
    };

    show = (obj) => {
        this.setState({
            show: true,
            title: obj.title ? obj.title : '提示',
            desc: obj.desc ? obj.desc : '',
            cancelTitle: obj.cancelTitle ? obj.cancelTitle : '',
            sureTitle: obj.sureTitle ? obj.sureTitle : '',
        })
    };

    hide = ()=>{
        this.setState({
            show: false,
        })
    }

    onClickCancelBtn() {
        this.setState({
            show: false,
        },function() {
            if (this.props.cancelHandler) {
                this.props.cancelHandler();
            }
        })
    }

    onClickSureBtn() {
        this.setState({
            show: false,
        },function() {
            if (this.props.sureHandler) {
                this.props.sureHandler();
            }
        })
    }

    componentWillMount() {

    }

}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        zIndex: 1000,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.6)',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    frameBox: {
        marginBottom: 50,
        width: '74%',
        backgroundColor: '#ffffff',
        borderRadius: 4,
        flexDirection: 'column',
        alignItems: 'center',
    },

    titleText: {
        marginTop: 20,
        fontSize: 16,
        color: '#000000',
    },
    descText: {
        textAlign: 'center',
        marginHorizontal: 15,
        marginTop: 14,
        color: '#999999',
        fontSize: 12,
        lineHeight: 20
    },
    bottomBox: {
        marginTop: 12,
        borderBottomLeftRadius: 4,
        borderBottomRightRadius: 4,
        borderTopColor: '#E4E4E4',
        borderTopWidth: 0.5,
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    bottomItemBox: {
        width: '50%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    cancelText: {
        color: '#222222',
        fontSize: 14
    },
    sureText: {
        color: '#FF9C00',
        fontSize: 15
    },

});
